<template>
        <!--筛选下拉框-->
        <transition name="slide">
            <!--购物-->
            <div class="shopping-warper" v-show="showFlag" @click.stop>
                <div class="shopping">
                    <div class="head">
                    <img src="">
                        <div class="pr">￥<span>99.00</span></div>
                        <div class="greyNine">请选择产品型号、规格</div>
                    </div>
                    <div class="chooseSize">
                        <div class="greyNine">型号</div>
                        <div class="tags">
                            <div class="tag">型号一</div>
                            <div class="tag">型号二</div>
                            <div class="tag">型号三</div>
                            <div class="tag">型号四</div>
                        </div>
                    </div>
                    <div class="chooseSize">
                        <div class="greyNine">尺寸</div>
                        <div class="tags">
                            <div class="tag">尺寸一</div>
                            <div class="tag">尺寸二</div>
                            <div class="tag">尺寸三</div>
                            <div class="tag">尺寸四</div>
                        </div>
                    </div>
                    <div class="number">
                        数量
                        <div class="jsq">
                            <div class="reduce">-</div>
                            <div class="digit"><input type="number" value="1"></div>
                            <div class="add">+</div>
                        </div>
                    </div>
                    <div class="cho">
                        <div @click="cancelbtn" class="cancel">取消</div>
                        <div @click="confirmbtn" class="confirm">确定</div>
                    </div>
                </div>
            </div>
        </transition>	
</template>
<script>
  export default {
    data() {
      return {
        showFlag: false
      }
    },
    methods: {
      show() {
        this.showFlag = true
      },
      hide() {
        this.showFlag = false
      },
      cancelbtn() {
        this.hide()
        //this.$emit('cancel')
      },
      confirmbtn() {
        this.hide()
        this.$emit('baycar')
      }
    }
  }
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";

.shopping-warper{
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    background-color:$color-background-d;    
    .shopping{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 50px;
        background-color:$color-highlight-background;
            .head{
                position:relative;
                height:78px;
                border-bottom:1px solid $color-background;
                img{
                    position:absolute;
                    width:76px;
                    height:76px;
                    border-radius:2px;
                    bottom:10px;
                    left:15px;                    
                }
                .pr {
                    position: absolute;
                    left: 100px;
                    top: 15px;
                    color: $color-sub-theme;
                    font-size: 15px;
                }
                .greyNine{
                    position:absolute;
                    left:100px;
                    bottom:15px;
                    font-size:$font-size-small;
                }                
            }
            .chooseSize{
                margin-left:15px;
                border-bottom:1px solid $color-background;
                .greyNine{
                    height:35px;
                    line-height:35px;
                    font-size:$font-size-small;
                }
                .tags{
                    overflow:hidden;
                    .tag{
                        float:left;
                        margin-right:15px;
                        margin-bottom:13px;
                        padding:3px 8px;
                        border:1px solid $color-text-ll;
                        font-size:13px;
                        border-radius:4px;
                        .red{
                            border:1px solid $color-sub-theme;
                            color:$color-sub-theme;
                        }                        
                    }                    
                }               
            }
            .number{
                color:$color-text-ll;
                height:64px;
                line-height:64px;
                margin-left:15px;
                position:relative;
                .jsq{
                    position:absolute;
                    right:15px;
                    width:90px;
                    height:25px;
                    border:1px solid $color-background ;
                    border-radius:3px;
                    top:19px;
                    display:flex;
                    display:-webkit-flex;
                    align-items:center;
                    justify-content:center;    
                }              
            }                                
    }  
  }
.jsq>div{
    flex:1;
    text-align:center;
    height:25px;
    line-height:25px;
}  
.jsq .digit{
    flex:2;
} 
.digit>input{
    width:100%;
    text-align:center;
}  
.reduce{
    background-color:$color-background ;
}
.digit{
    border-left:1px solid $color-background ;
    border-right:1px solid $color-background ;
}
.cho{
    height:50px;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    justify-content:center;
    border-top:1px solid $color-background ;
}
.cho>div{
    flex:1;
    text-align:center;
    height:25px;
    font-size:15px;
}
.cancel{
    border-right:1px solid $color-background ;
}
.confirm{
    color:$color-sub-theme;
}    

  .slide-enter-active,.slide-leave-active{
    transition:all 0.3s;
  }
  .slide-enter{
    transform:translate3d(0,100%,0);
  } 
  .slide-leave-to{
    transform:translate3d(0,100%,0);
  } 
</style>